<template>
	<div class="list-box">
		<div class="pannel-title pannel-between">
			<div>在线工具列表</div>
			<div>
				<a class="download-btn" :href="fileUrl" target="_blank" download="onlineTool.xls">下载导入模板</a>
				<a-button class="pannel-btn" style="margin-right: 10px" size="small" type="primary" shape="round" @click="uploadFile()">批量导入</a-button>
				<a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addTool()">
					<PlusCircleFilled />
					新增在线工具
				</a-button>
			</div>
		</div>
		<div class="line"></div>
		<div class="data-table">
			<a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
				<template #logo="{ text }">
					<img v-if="text" :src="text" style="width: 80px; height: 80px; display: block" />
				</template>
				<template #action="{ record }">
					<router-link :to="{ path: '/onlineToolAdd', query: { id: record.id } }" title="编辑" style="margin-right: 5px"><img src="@/assets/images/cz-edit.png" /></router-link>
					<a @click="deleteToolType(record)" title="删除"><img src="@/assets/images/cz-delete.png" /></a>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script>
import { PlusCircleFilled } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Button } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import Upload from "@/util/upload";
export default {
	components: {
		PlusCircleFilled,
		ATable: Table,
		AButton: Button,
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "在线工具 / 在线工具管理",
			isBack: false,
		});
		const formState = ref({
			id: "",
			name: "",
			displayPriority: "",
		});
		const dataSource = ref([]);
		const columns = reactive([
			{
				title: "在线工具名称",
				dataIndex: "name",
				key: "name",
			},
			{
				title: "logo",
				dataIndex: "logo",
				key: "logo",
				slots: { customRender: "logo" },
			},
			{
				title: "下载地址",
				dataIndex: "url",
				key: "url",
			},
			{
				title: "简介",
				dataIndex: "desc",
				key: "desc",
			},
			{
				title: "排序序号",
				dataIndex: "display_priority",
				key: "display_priority",
			},
			{
				title: "操作",
				key: "action",
				slots: { customRender: "action" },
			},
		]);
		const pagination = reactive({
			current: 1,
			pageSize: 10,
			total: 0,
		});
		return {
			dataSource,
			columns,
			pagination,
			formState,
			isLoading: ref(false),
			fileUrl:'',
		};
	},
	mounted() {
		this.fileUrl = process.env.VUE_APP_FILEURL + "/在线工具.xls";
		this.getList();
	},
	methods: {
		getList() {
			this.isLoading = true;
			httpRequest
				.post("获取在线工具列表", { page: this.pagination.current, pageSize: this.pagination.pageSize })
				.then((res) => {
					this.dataSource = res.data.data;
					this.pagination.total = res.data.total;
				})
				.finally(() => {
					this.isLoading = false;
				});
		},
		handleTableChange(page) {
			this.pagination.current = page.current;
			this.getList();
		},
		deleteToolType(item) {
			Modal.confirm({
				title: "系统提示",
				content: "确认删除当前在线工具？",
				okText: "确认",
				cancelText: "取消",
				onOk: () => {
					return new Promise((res) => {
						httpRequest
							.post("删除在线工具", { id: item.id })
							.then(() => {
								message.success("删除在线工具成功");
								this.getList();
							})
							.catch(() => {
								message.warning({ content: "在线工具删除失败", key: "error" });
							})
							.finally(() => {
								this.isLoading = false;
								res();
							});
					});
				},
			});
		},
		addTool() {
			this.$router.push("/onlineToolAdd");
		},
		uploadFile(){
			Upload.Single({ fileType: [".xls", ".xlsx"] }).then((res) => {
				if (res.code === 0) {
					httpRequest.post("在线工具批量导入",{file:res.data.fileUrl}).then(()=>{
						message.success("导入成功");
						this.getList();
					})
				}
			});
		},
		downloadFile(){
			window.open(this.fileUrl);
		}
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
.download-btn{
	font-size: 14px;
	color: #333;
	margin-right: 10px;
	&:hover{
		text-decoration: underline;
	}
}
</style>
